<!doctype html>
<html lang="en">
<head>
	<title>Switch between display block and inline on :hover</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
		}
		#dummy {
			background-color: black;
		}
		#hoverTest {
			border: 5px solid green;
			border-left: 100px solid green;
			color: black;
			display: block;
		}
		#hoverTest:hover {
			border-color: darkred;
			display: inline;
		}
		#after_hoverTest {
			background-color: blue;
			color: white;
			padding: 10px;
		}
	</style>

	<script src="../../resources/js-test.js"></script>
</head>

<body>
	<div id="dummy" class="box"></div>
	<div id="hoverTest" class="box">When hovered, this box's display will switch from <b>block</b> to <b>inline</b></div>
	<div id="after_hoverTest" class="box">This is here to show the layout being recomputed</div>

	<script type="text/javascript">
		if (window.testRunner)
			testRunner.waitUntilDone();

		function beginTest() {
			if (window.eventSender) {
				var hoverTest  = document.getElementById("hoverTest");

				// move mouse on the hover test object
				eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10);
				eventSender.mouseDown(0);

				release();
			}
		}

		function release() {
			if (window.eventSender) {
				var hoverTest  = document.getElementById("hoverTest");
				var displayMode = window.getComputedStyle(hoverTest).getPropertyValue("display");

				if (displayMode == "inline")
					testPassed("Setting display to inline on hover processed OK.");
				else
					testFailed("Setting display to inline on hover FAILED." + " (expected 'inline', got '" + displayMode + "')");

				var elementsToHide = document.getElementsByClassName('box');
				for (var element, i = 0; element = elementsToHide[i]; i++)
				    element.style.visibility = "hidden";

				eventSender.mouseUp(0);

		        if (window.testRunner)
					testRunner.notifyDone();
			}
		}

		beginTest();
	</script>
</body>
</html>